<template xmlns="http://www.w3.org/1999/html">
  <div style="margin-top: 20px;">
    <el-row>
      <el-col :span="8">
        <el-card style="margin: 5px auto;width: 90%" >
          <div slot="header">
            <el-row>
              <div>
                <el-input
                    clearable
                    class="filter-item"
                    style="width: 150px;"
                    v-model="titleKey"
                    placeholder="请输入博文标题"
                    @keyup.enter.native="getBlog()"
                ></el-input>
                <el-button style="margin-left: 12px" circle icon="el-icon-search" type="info" @click="getBlog()"></el-button>
              </div>
              <div style="float: left;margin-top: 14px;">
                <i class="el-icon-time"></i>
                <el-radio-group v-model="reverse" style="margin-left: 5px">
                  <el-radio :label="true">倒序</el-radio>
                  <el-radio :label="false">正序</el-radio>
                </el-radio-group>
              </div>

            </el-row>
          </div>
          <!--  内容  -->
          <div>
            <div style="font-size: medium;color: #97a8be">
              博文标题
            </div>
            <el-timeline
                style="margin-top: 15px"
                :reverse="reverse"
                v-infinite-scroll="load"
                infinite-scroll-disabled="disabled">
              <el-timeline-item
                  v-for="item in blogList"
                  icon="el-icon-info"
                  size="large"
                  color="#18564c70"
                  :timestamp="item.createTime">
                  <span @click="clickTime(item.id)"
                        :class="[item.id == clickId ? 'sortBoxSpan sortBoxSpanSelect' : 'sortBoxSpan']">
                    {{item.title}}
                  </span>
              </el-timeline-item>
            </el-timeline>
          </div>
          <el-pagination
              class="pageSize"
              background
              layout="prev, pager, next,total,sizes"
              :current-page.sync="currentPage"
              :page-sizes="[2, 5, 10, 20]"
              :page-size="pageSize"
              :total="total"
              @size-change="handleSizeChange"
              @current-change=handleCurrentChange>
          </el-pagination>
        </el-card>
      </el-col>
      <el-col :span="15">
        <el-card style="margin-top: 5px ">
          <el-table
              :data="commentList"
              style="height: 100%;margin-bottom: 20px;"
              row-key="commentId"
              :tree-props="{children: 'replyList'}">
            <el-table-column
                prop="commentId"
                label="commentId"
                width="180">
            </el-table-column>
            <el-table-column
                prop="fromName"
                label="评论者的昵称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="content"
                label="评论内容"
                width="180">
            </el-table-column>
            <el-table-column
                prop="likeCount"
                label="点赞量"
                width="180">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="评论时间"
                sortable
                width="180">
            </el-table-column>
            <el-table-column
                label="操作"
                width="180">
              <template slot-scope="scope">
                <el-button
                    v-if="scope.row.replyList.length == 0"
                    @click.native.prevent="deleteComment(scope.row)"
                    type="text"
                    style="color: #17B3A3"
                    :disabled="!isAuth('comment:list:remove')"
                    size="small">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-card>
      </el-col>
    </el-row>



  </div>
</template>

<script>
import { page } from '@/api/blog'
import { getCommentById,delComment} from '@/api/comment'
export default {
  name: "index",
  components:{},
  data () {
    return {
      blogList: [],
      reverse: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      size: 0,
      clickId: '',
      commentList: [],
      initId: 1,
      titleKey:'',
    }
  },

  methods:{
    getBlog(){
      let params = {}
      params.title = this.titleKey
      page(this.currentPage,this.pageSize,params).then(res => {
        const { blogList } = res.data.data
        this.blogList = blogList.records
        this.total = blogList.total
        this.size = blogList.size
        this.clickTime(this.blogList[0].id)
      })
    },
    clickTime(id){
      this.clickId = id
      getCommentById(id).then( res => {
        this.commentList = res.data.data.data
      })
    },
    deleteComment(row){
        this.$confirm(`是否删除"${row.content}"该评论?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = []
          params.push(row.commentId)
          delComment(row).then( res => {
            if (res.data.status){
              this.$message.success("删除成功")
              this.clickTime(this.clickId)
            }else {
              this.$message.error("删除失败")
            }
          })
        }).catch(() => {});
    },
    //分页-控制每页显示的页数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getBlog()
    },
    //分页-控制当前页数
    handleCurrentChange(currentPage){
      this.currentPage = currentPage
      this.getBlog()
    },
  },

  created() {
    this.getBlog(1,10)
  }
}
</script>
<style scoped>
.infinite-list-wrapper {
  width: 100%;
  height: 800px;
  margin: 5px auto;
}

.sortBoxSpan {
  cursor: pointer;
}
.sortBoxSpan:hover {
  color: #409eff;
}
.sortBoxSpanSelect {
  color: #409eff;
}
</style>
